<template>
	<view class="tab-bar">
	<scroll-view class="tab-scroll" scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scrollInto">
		<view class="tab-scroll-box">
			<view @click="handleActive(i)" :class="{active:index === i}" :id="`active${i}`" class="tab-bar-content" v-for="(item,i) in tabList" :key="i">
			{{item.name}}
			</view>
		</view>		
	</scroll-view>
	<view class="tab-bar-icons" @click="goTab">
		<uni-icons type="gear" size="26" color="#666"></uni-icons>
	</view>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props:{
			tabList:{
				type:Array,
			},
			index:{
				type:Number
			}
		},
		data() {
			return {
			scrollInto:'active0'
				
			};
		},
		watch:{
			//获取最新的index下标
			index(i){
				this.scrollInto = `active${i}`
			}
		},
	onLoad() {
		
	},
		methods:{
			handleActive(index){
				this.$emit("changeActive",index)
				
			},
			goTab(){
				//判断用户是否登录
				 this.checkedisLogin().then(()=>{
					 uni.navigateTo({
					url:"/pages/setTab/setTab"
				})
				 })
				
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
@import 'css/TabBar.scss'
</style>